<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
      .header {
        height: 50px;
        line-height: 50px;
        background: #fff;
      }
      .logo {
        border-right: 1px solid #e0e0e0;
        border-radius: 0px;
        background: #fff;
        font-size: 22px;
        text-align: center;
      }
      .tools {
        padding: 0px 23px;
      }
      .userinfo {
        text-align: right;
        padding-right: 30px;
        float: right;
      }
    </style>
  </head>

  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

  <body>
    <div id="app">

			<el-row>
				<el-col :span="6" class="header logo" style="max-width:230px;min-width:200px">
          {{ collapsed?'V':'数据分析系统' }}
        </el-col>
        <el-col :span="12" class="header">
          <div class="tools">
            <i class="fa fa-align-justify"></i>
          </div>
        </el-col>
				<el-col :span="6" class="header userinfo">
          <el-dropdown trigger="hover">
            <span class="el-dropdown-link"><img style="width:100px; height:40px;float:right" src="http://www.embedway.com/em/Public/images/common/logo.png"/> 用户1 </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>我的消息</el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item>注销</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <el-row style="display: flex; position: absolute; top:50px; bottom: 0px;overflow: hidden; width:100%;border-top: 1px solid #e0e0e0">
				<el-col :span="6" style="max-width:230px;min-width:200px;">
					<el-menu default-active="2" style="height: 100%;border-right: 1px solid #e0e0e0" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" unique-opened router v-show="!collapsed">
						<el-submenu index="1">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span>导航一</span>
							</template>
							<el-menu-item-group>
								<template slot="title">分组一</template>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-2">选项2</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group title="分组2">
								<el-menu-item index="1-3">选项3</el-menu-item>
							</el-menu-item-group>
							<el-submenu index="1-4">
								<template slot="title">选项4</template>
								<el-menu-item index="1-4-1">选项1</el-menu-item>
							</el-submenu>
						</el-submenu>
						<el-menu-item index="2">
							<i class="el-icon-menu"></i>
							<span slot="title">导航二</span>
						</el-menu-item>
						<el-menu-item index="3" disabled>
							<i class="el-icon-document"></i>
							<span slot="title">导航三</span>
						</el-menu-item>
						<el-menu-item index="4">
							<i class="el-icon-setting"></i>
							<span slot="title">导航四</span>
						</el-menu-item>
					</el-menu>
        </el-col>
        <section style="background: #fefefe;flex: 1;overflow-y: scroll;padding:20px">
          <div id="container" style="height: 100%"></div>
        </section>
      </el-row>
		</div>
  </body>
<script>
  var app = new Vue({
		el: "#app",
    data: {
      collapsed: false
    },
    methods: {
			handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
	})

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = null;
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
</script>
</html>
